<!---->
<template>
  <div class="top">
    <div class="tl">
      <div class="tlt">欢迎您</div>
      <div class="tlb">{{user.nickname?`${user.nickname}  第${record}位访客`:''}}</div>
    </div>
    <div class="tc" v-if="user.nickname">
      <div class="serch" v-if="tabActive==1||tabActive==4||tabActive==7">
        <el-input
          placeholder="请输入内容"
          v-model="search"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            type="danger"
            @click="serchBlog()"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="tc" v-else>
      <div class="serch">
        <el-input
          placeholder="请输入内容"
          v-model="search"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            type="danger"
            @click="serchBlog()"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="tr">
      <div class="tab" v-for="(item,i) in tabData" :key="i" :style="{color:tabActive==item.index?'blue':''}" @click="handleTab(item)">
        <span v-if="item.show==true">{{item.name}}</span>
        </div>
      <div class="username" v-if="user.nickname">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" :style="{color:tabActive==6||tabActive==7||tabActive==8?'blue':''}">
            {{ user.nickname }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(items,n) in tabList" :key="n" :command="items">{{items.tabname}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';

export default {
  props:["user","record"],
  //import引入的组件需要注入对象中才能用
  components: {},
  data() {
    return {
        search: "",
      tabActive: 1,
      username:'103宿舍',
      tabData: [
        {
          name: "首页",
          index: 1,
          path:'/home',
          show:true
        },
        {
          name: "发布博客",
          index: 2,
          path:'/issue',
          show:true
        },
        {
          name: "登录/注册",
          index: 3,
          path:'/login',
          show:sessionStorage.getItem('user')?false:true
        },
        {
          name: "资源",
          index: 4,
          path:'/source',
          show:true
        },
        {
          name: "上传资源",
          index: 5,
          path:'/updateSource',
          show:true
        },
      ],
      tabList:[
        {
          tabname:'个人中心',
          tabindex:6,
          path:'/personal'
        },
        {
          tabname:'内容管理',
          tabindex:7,
          path:'/blogManage'
        },
        {
          tabname:'退出',
          tabindex:8,
          path:'/home'
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      handleCommand(command) {
        // this.$message('click on item ' + command);
        this.tabActive = command.tabindex
        this.$router.push(command.path)
      },
      handleTab(item){
        this.tabActive = item.index
        this.$router.push(item.path)
      },
      serchBlog(){
        this.$emit('handleSerch',this.search);
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.tabActive = this.$route.meta.index?this.$route.meta.index:1
    console.log("dfdfdf",this.$route.meta.index)
  },
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
@fontSize: 24px;

.el-input {
  width: 100%;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-button {
  background: #0084ff !important;
  color: #fff !important;
}
.el-dropdown-link[data-v-29e8c3c6]{
    color:#fff;
}
.top {
  height: 100%;
  widows: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tl {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .tlt {
      font-size: @fontSize;
      letter-spacing: 20px;
      font-family: YSBiaoTiHei-regular;
      color: rgba(255, 255, 255, 100);
    }
    .tlb {
      margin-top: 10px;
      margin-left: 100px;
      color: rgba(58, 98, 215, 100);
    }
  }
  .tc {
    flex: 1;
  }
  .tr {
    width: 35%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: rgba(255, 255, 255, 100);
    div {
      cursor: pointer;
      padding-left: 20px;
    }
  }
}
</style>